/* 列表辅助样式 */

// :root {
//     --custom-list-guides-line-color: var(--b3-theme-primary-lighter);
// }

/* 👇👇👇 列表辅助线 👇👇👇 */
.seam(@subtype) {
    &[data-subtype="@{subtype}"]>.protyle-action::before {
        /* 与本层节点的接缝 */
        // transition: all 250ms;
        right: var(e(%("--custom-list-guides-line-right-%s", @subtype)));
    }
}

.protyle-content {
    .li[data-node-id]:has([data-plugin-focus=true])>.protyle-action {
        /* 上级节点标志颜色 */
        // transition: all 250ms;
        color: var(--custom-list-item-color);
    }

    .list[data-node-id] .list[data-node-id]:has([data-plugin-focus=true]) {

        >.li[data-node-id] {
            &::after {
                /* 子弹流直线 */
                // transition: all 250ms;

                content: "";
                top: calc(-5px);
                bottom: 0;
                left: calc(16px - 2em);

                position: absolute;

                border-left: var(--custom-list-guides-line-width) solid var(--custom-striking-color);
            }

            &:has([data-plugin-focus=true]) {
                >.protyle-action {
                    &::before {
                        /* 子弹流弧线 */
                        // transition: all 250ms;

                        content: "";
                        top: var(--custom-list-guides-line-top);
                        bottom: calc(2px + 7em / 8);
                        left: calc(16px - 2em);

                        position: absolute;

                        border-left: var(--custom-list-guides-line-width) solid var(--custom-striking-color);
                        border-bottom: var(--custom-list-guides-line-width) solid var(--custom-striking-color);
                        border-bottom-left-radius: var(--custom-list-guides-line-radius);
                    }
                }

                .seam(t);
                .seam(u);
                .seam(o);

                &,
                &~.li[data-node-id] {
                    &::after {
                        // transition: all 250ms;
                        border-left-color: transparent;
                    }
                }
            }

            // 下级节点
            // &:has(>[data-plugin-focus=true][data-node-id]) {
            //     &,
            //     .li[data-node-id] {
            //         &::before {
            //             // transition: all 250ms;
            //             border-left-color: var(--b3-theme-primary);
            //         }
            //     }
            // }
        }
    }

    // 取消其他视图的辅助线
    [custom-type] .list[data-node-id],
    .list[data-node-id][custom-type] {
        .list[data-node-id]:has([data-plugin-focus=true]) {
            >.li[data-node-id] {
                &::after {
                    // content: unset;
                    top: unset;
                    // bottom: unset;
                    left: unset;

                    // position: unset;

                    // border-left: unset;
                }

                &:has([data-plugin-focus=true]) {

                    >.protyle-action {
                        &::before {
                            content: normal;
                        }
                    }
                }
            }

        }
    }
}

/* 👆👆👆 列表辅助线 👆👆👆 */

/* 👇👇👇 表格列表辅助线 👇👇👇 */
.protyle-content {

    [custom-type~=table],
    [custom-type~="表格"] {

        // 基于焦点的辅助线
        [data-node-id] {

            &.li {

                // 上级节点
                &:has([data-plugin-focus=true]) {
                    transition: all 250ms;
                    outline-color: var(--custom-striking-color);
                }

                // 下级节点
                &:has(>[data-plugin-focus=true][data-node-id]) {

                    .list[data-node-id] {

                        .li[data-node-id] {
                            transition: all 250ms;
                            outline-color: var(--b3-theme-primary);
                        }
                    }
                }
            }
        }

        // 基于鼠标悬浮的辅助线
        // [data-node-id].li:hover {
        //     /* 鼠标悬浮列表项 */
        //     background-color: var(--custom-list-table-hover-background-color);
        // }
    }
}

/* 鼠标悬浮上级节点轮廓高亮 */
/* .protyle-content *[custom-type~=table].list [data-node-id].li:hover,
.protyle-content *[custom-type~=表格].list [data-node-id].li:hover {
    outline-color: var(--custom-striking-color);
} */

/* 鼠标悬浮下级节点轮廓高亮 */
/* .protyle-content *[custom-type~=table].list [data-node-id].li:hover~[data-node-id].list [data-node-id].li,
.protyle-content *[custom-type~=表格].list [data-node-id].li:hover~[data-node-id].list [data-node-id].li {
    outline-color: var(--b3-theme-primary);
} */

/* 👆👆👆 表格列表辅助线 👆👆👆 */

/* 👇👇👇 导图列表辅助线 👇👇👇 */

.protyle-content {

    [custom-type~="脑图"],
    [custom-type~="导图"],
    [custom-type~="思维导图"],
    [custom-type~=map],
    [custom-type~=mind-map] {

        // 基于焦点的辅助线
        [data-node-id] {

            &.li {

                // 上级节点
                &:has([data-plugin-focus=true])>[data-node-id]:not(.li, .list),
                &:has([data-plugin-focus=true])>[data-node-id]:not(.li, .list):has(+.list[data-node-id]) {
                    transition: all 250ms;
                    outline-color: var(--custom-striking-color);
                }

                // 下级节点
                &:has(>[data-plugin-focus=true][data-node-id]) {

                    .list[data-node-id] {

                        [data-node-id]:not(.li, .list) {
                            transition: all 250ms;
                            outline-color: var(--b3-theme-primary);
                        }

                        &:after,
                        .li[data-node-id]::before,
                        .li[data-node-id]::after,
                        .list[data-node-id]::after {
                            transition: all 250ms;
                            /* 继承线高亮 */
                            border-color: var(--b3-theme-primary) !important;
                        }
                    }
                }
            }
        }

        // 基于鼠标悬浮的辅助线
        // [data-node-id] {
        //     &.li {
        //         &:hover {
        //             /* 鼠标悬浮列表项 */
        //             background-color: var(--custom-list-table-hover-background-color);
        //             transition: all 500ms;

        //             >[data-node-id]:not(.li, .list)>[contenteditable][spellcheck] {
        //                 /* 鼠标悬浮上级节点轮廓高亮 */
        //                 outline-color: var(--custom-striking-color);
        //             }
        //         }

        //         >[data-node-id]:not(.li, .list):hover>[contenteditable][spellcheck] {
        //             /* 鼠标悬浮当前节点高亮 */
        //             background-color: var(--b3-theme-background);
        //             outline-color: var(--b3-theme-primary);
        //         }
        //     }

        //     &:hover+[data-node-id].list [data-node-id].li>[data-node-id]:not(.li, .list)>div[contenteditable][spellcheck] {
        //         /* 鼠标悬浮下级节点轮廓高亮 */
        //         outline-color: var(--b3-theme-primary);
        //     }

        //     &:hover~[data-node-id].list {

        //         &:after,
        //         [data-node-id].li::after,
        //         [data-node-id].li::before,
        //         [data-node-id].list::after {
        //             /* 继承线高亮 */
        //             border-color: var(--b3-theme-primary);
        //         }
        //     }
        // }
    }
}

/* 导航线高亮 */
/* .protyle-content *[custom-type~="脑图"] [data-node-id].li:hover::before,
.protyle-content *[custom-type~="脑图"] [data-node-id].li:hover::after,
.protyle-content *[custom-type~="脑图"] [data-node-id].list:hover::after,
.protyle-content *[custom-type~="脑图"] [data-node-id].li:nth-last-child(2):hover::after,

.protyle-content *[custom-type~="导图"] [data-node-id].li:hover::before,
.protyle-content *[custom-type~="导图"] [data-node-id].li:hover::after,
.protyle-content *[custom-type~="导图"] [data-node-id].list:hover::after,
.protyle-content *[custom-type~="导图"] [data-node-id].li:nth-last-child(2):hover::after,

.protyle-content *[custom-type~="思维导图"] [data-node-id].li:hover::before,
.protyle-content *[custom-type~="思维导图"] [data-node-id].li:hover::after,
.protyle-content *[custom-type~="思维导图"] [data-node-id].list:hover::after,
.protyle-content *[custom-type~="思维导图"] [data-node-id].li:nth-last-child(2):hover::after,

.protyle-content *[custom-type~=map] [data-node-id].li:hover::before,
.protyle-content *[custom-type~=map] [data-node-id].li:hover::after,
.protyle-content *[custom-type~=map] [data-node-id].list:hover::after,
.protyle-content *[custom-type~=map] [data-node-id].li:nth-last-child(2):hover::after,

.protyle-content *[custom-type~=mind-map] [data-node-id].li:hover::before,
.protyle-content *[custom-type~=mind-map] [data-node-id].li:hover::after,
.protyle-content *[custom-type~=mind-map] [data-node-id].list:hover::after,
.protyle-content *[custom-type~=mind-map] [data-node-id].li:nth-last-child(2):hover::after {
    border-color: var(--custom-striking-color);
    transition: all 500ms;
}
*/

/* 👆👆👆 导图列表辅助线 👆👆👆 */
